function HandlePageExpense(gui, operator, now, options) {
  this._gui = gui;
  this._operator = operator;
  this._now = now;
  this._options = options;
  this._queue = 0;
  
  this._createElements();
};
HandlePageExpense.prototype._createElements = function() {
  var _self = this;
  this._popupBox = new PopupBox();
  this._popupBox2 = new PopupBox2();
  this._expense = Expense.instance();
  this._expense.payDate = '';
  this._search = DlmanageUtils.search();
  
  tr = this._gui.mains.insertRow(-1);
  td = tr.insertCell(-1);
  td.style.backgroundColor = '#fff';
  td.colSpan = 11;
  td.appendChild(DOMUtils.getLoadingImage());
  
  this._loadData();
};

HandlePageExpense.prototype._loadData = function() {
  this._results = null;
  this._payees = null;
  this._expenses = null;
  this._particulars = null;
  this._parameters = null;
  this._retrieveExpenses(1);
  this._retrieveResults(1);
  this._retrievePayees();
  this._retrieveParticulars();
};

HandlePageExpense.prototype._verifyData = function() {
  if (this._results && this._expenses && this._payees && this._particulars) {
    this._updateElements();
  }
};

HandlePageExpense.prototype._retrieveResults = function(page, condition, from, to) {
  var _self = this;
  var args = ((condition) ?  '&c=' + condition : '') + '&p=' + page + ((from) ?  '&from=' + from : '') + ((to) ?  '&to=' + to : '');
  new RequestUtils()._custom('ieexpense', args, function(result, params) { _self._results = result;
                                                                           _self._verifyData.call(_self);
                                                                         }, null);
};

HandlePageExpense.prototype._retrieveExpenses = function(page, order, queue, condition, from, to, size) {
  var _self = this;
  order = (order) ? order : 'd.oid';
  queue = (queue) ? queue : 'DESC';
  var args = ((condition) ?  '&c=' + condition : '') + '&p=' + page + '&o=' + ((order)? order : '') + '&q=' + ((queue) ? queue : '') + ((from) ?  '&from=' + from : '') + ((to) ?  '&to=' + to : '') + '&s=' + ((size) ? size: DlmanageUtils.number);
  new RequestUtils()._custom('expenses', args, function(result, params) { _self._expenses = result.data;
                                                                          _self._parameters = result;
                                                                          _self._verifyData.call(_self);
                                                                        }, null);
};

HandlePageExpense.prototype._retrievePayees = function() {
  var _self = this;
  new RequestUtils()._read('ipayee', null, null, null, null, 'd.name', null, function(result, params) { _self._payees = result.data;
                                                                                                        _self._verifyData.call(_self);
                                                                                                      }, null);
};

HandlePageExpense.prototype._retrieveParticulars = function() {
  var _self = this;
  new RequestUtils()._read('iparticular', null, null, null, null, 'd.name', null, function(result, params) { _self._particulars = result.data;
                                                                                                             _self._verifyData.call(_self);
                                                                                                           }, null);
};

HandlePageExpense.prototype._updateElements = function() {
  var _self = this;
  DlmanageUtils.clear(this._gui.summarize);
  DOMUtils.removeChildElements(this._gui.pagination);
  DlmanageUtils.clear(this._gui.add);
  DOMUtils.removeTableRows(this._gui.mains, 0);

  this._gui.summarize.receipt.appendChild(document.createTextNode('$' + (this._results.expense).toFixed(2)));
  this._gui.summarize.cash.appendChild(document.createTextNode('$' + (this._results.cash).toFixed(2)));
  this._gui.summarize.nonCash.appendChild(document.createTextNode('$' + (this._results.noncash).toFixed(2)));
  
  /*-----SORT-----*/
  this._queue = !this._queue;
  this._gui.cdate.onclick = function() { _self._retrieveExpenses.call(_self, _self._parameters.page, 'd.createdDate', (_self._queue) ? 'ASC' : 'DESC', _self._parameters.condition);
                                      };
  this._gui.pdate.onclick = function() { _self._retrieveExpenses.call(_self, _self._parameters.page, 'd.payDate', (_self._queue) ? 'ASC' : 'DESC', _self._parameters.condition);
                                       };
  this._gui.payee.onclick = function() { _self._retrieveExpenses.call(_self, _self._parameters.page, 'd.payee', (_self._queue) ? 'ASC' : 'DESC', _self._parameters.condition);
                                       };
  this._gui.particular.onclick = function() { _self._retrieveExpenses.call(_self, _self._parameters.page, 'd.particular', (_self._queue) ? 'ASC' : 'DESC', _self._parameters.condition);
                                            };
  this._gui.ng.onclick = function() { _self._retrieveExpenses.call(_self, _self._parameters.page, 'd.ng', (_self._queue) ? 'ASC' : 'DESC', _self._parameters.condition);
                                    };
  this._gui.ne.onclick = function() { _self._retrieveExpenses.call(_self, _self._parameters.page, 'd.ne', (_self._queue) ? 'ASC' : 'DESC', _self._parameters.condition);
                                    };
  
  this._expense.userTrackId = this._operator.trackId;
  this._expense.userAccount = this._operator.account;
  this._gui.add.createdDate.appendChild(document.createTextNode(SimpleDate.format(this._now)));
  this._expense.createdDate = this._now;
  
  this._gui.add.paidDate.value = (this._expense.payDate) ? SimpleDate.format(this._expense.payDate) : '';
  this._gui.add.paidDate.onclick = function() { var context = this;
                                                _self._changeDate.call(_self, this, _self._expense.payDate, function(sd) { _self._expense.payDate = sd; context.focus(); }, false);
                                                return false;
                                              };
  this._gui.add.payee.who.options[this._gui.add.payee.who.options.length] = new Option('');
  for (var i = 0, il = this._payees.length; i < il; i++) {
    var payee = this._payees[i];
    var option = new Option(payee.name);
    this._gui.add.payee.who.options[this._gui.add.payee.who.options.length] = option;
    if (option.text == this._expense.payee){
      this._gui.add.payee.who.selectedIndex = this._gui.add.payee.who.options.length - 1;
    }
  }
  if (this._payees.length > 0) {
    this._expense.payee = this._gui.add.payee.who.options[this._gui.add.payee.who.selectedIndex].text;
    this._gui.add.payee.who.onchange = function() { _self._expense.payee = this.options[this.selectedIndex].text; };
  }
  this._gui.add.payee.add.onclick = function() { var object = IPayee.instance();
                                                 var div = document.createElement('div');
                                                 var func1 = function() { _self._popupBox._close();
                                                                          _self._expense.payee = object.name;
                                                                          new RequestUtils()._write('ipayee', [object], [], function() { _self._retrievePayees.call(_self); }, { pos: DOMUtils.findPos(_self._gui.add.payee.add) });
                                                                        };
                                                 var func2 = function() { _self._popupBox._close();
                                                                        };
                                                 MiscUtils.dialog(_self._popupBox, DOMUtils.findPos(this), div, func1, func2, { ok: 'Add' });
                                                 new DialogIObject(div, object, { name: 'ipayee', title: 'Payees' });
                                               };
  
  this._gui.add.particulars.particular.options[this._gui.add.particulars.particular.options.length] = new Option('');
  for (var i = 0, il = this._particulars.length; i < il; i++) {
   var particular = this._particulars[i];
   var option = new Option(particular.name);
   this._gui.add.particulars.particular.options[this._gui.add.particulars.particular.options.length] = option;
   if (option.text == this._expense.particular){
     this._gui.add.particulars.particular.selectedIndex = this._gui.add.particulars.particular.options.length - 1;
   }
 }
 if (this._particulars.length > 0) {
   this._expense.particular = this._gui.add.particulars.particular.options[this._gui.add.particulars.particular.selectedIndex].text;
   this._gui.add.particulars.particular.onchange = function() { _self._expense.particular = this.options[this.selectedIndex].text; };
 }
 this._gui.add.particulars.add.onclick = function() { var object = IParticular.instance();
                                                      var div = document.createElement('div');
                                                      var func1 = function() { _self._popupBox._close();
                                                                               _self._expense.particular = object.name;
                                                                               new RequestUtils()._write('iparticular', [object], [], function() { _self._retrieveParticulars.call(_self); }, { pos: DOMUtils.findPos(_self._gui.add.particulars.add) });
                                                                             };
                                                      var func2 = function() { _self._popupBox._close();
                                                                             };
                                                      MiscUtils.dialog(_self._popupBox, DOMUtils.findPos(this), div, func1, func2, { ok: 'Add' });
                                                      new DialogIObject(div, object, { name: 'iparticular', title: 'Particulars' });
                                                    };
  this._gui.add.c.checked = false;
  this._gui.add.b.checked = false;
  this._gui.add.q.checked = false;
  this._gui.add.c.onclick = function() { _self._expense.method = 'C';};
  this._gui.add.b.onclick = function() { _self._expense.method = 'B';};
  this._gui.add.q.onclick = function() { _self._expense.method = 'Q';};
  
  this._gui.add.amount.onchange = function() { _self._expense.amount = this.value; };
  this._gui.add.qn.onchange = function() { _self._expense.chequeNumber = this.value; };
  
  this._gui.add.ng.onclick = function() { if (this.checked == true) {
                                            _self._expense.ng = true;
                                          } else {
                                            _self._expense.ng = false;
                                          }
                                        };
  this._gui.add.ne.onclick = function() { if (this.checked == true) {
                                          _self._expense.ne = true;
                                        } else {
                                          _self._expense.ne = false;
                                        }
                                      };
  this._gui.add.note.onchange = function() { _self._expense.note = this.value; };
  this._gui.add.add.onclick = function() { if (!_self._expense.payDate) {
                                             window.alert('请填写付款时间');
                                             return;
                                           } else if(!_self._expense.payee) {
                                             window.alert('请选择收款人');
                                             return;
                                           } else if(!_self._expense.particular) {
                                             window.alert('请选择支付项目');
                                             return;
                                           } else if (_self._gui.add.amount.value == '' || _self._gui.add.amount.value == 0) {
                                             window.alert('数值不能为\'' + _self._gui.add.amount.value + '\'');
                                             return;
                                           } else if (!_self._expense.method) {
                                             window.alert('请选择付款类型');
                                             return;
                                           } else if (_self._expense.method == 'Q' && !_self._expense.chequeNumber) {
                                             window.alert('请填写支票编号');
                                             return;
                                           } else {
                                             if (_self._operator.type == '{{$smarty.const.USER_TYPE_ACCOUNTANT|escape:javascript}}') {
                                               if (_self._expense.method == 'C') {
                                                 _self._expense.status = 2;
                                               } else {
                                                 _self._expense.status = 3;
                                               }
                                             } else {
                                               _self._expense.status = 2;
                                             }
                                             new RequestUtils()._write('expense', [_self._expense], [], function() { location.reload(); }, { pos: DOMUtils.findPos(this) });
                                           }
                                         };
  
  if (this._expenses.length == 0) {
    tr = this._gui.mains.insertRow(-1);
    tr.className = 'roweven';
    td = tr.insertCell(-1);
    td.colSpan = 11;
    td.style.height = '24px';
    td.style.textAlign = 'center';
    td.appendChild(document.createTextNode('N/A'));
  }

  for (var i = 0, il = this._expenses.length; i < il; i++) {
    var expense = this._expenses[i];
    tr = this._gui.mains.insertRow(-1);
    tr.className = (tr.rowIndex % 2 == 0) ? 'roweven' : 'rowodd';
    td = tr.insertCell(-1);
    td.className = 'pageexpense_td4';
    if (expense.status == -1) {
      td.style.textDecoration = 'line-through';
    }
    td.appendChild(document.createTextNode(SimpleDate.format(expense.createdDate)));
    td = tr.insertCell(-1);
    td.className = 'pageexpense_td5';
    if (expense.status == -1) {
      td.style.textDecoration = 'line-through';
    }
    td.appendChild(document.createTextNode(SimpleDate.format(expense.payDate)));
    td = tr.insertCell(-1);
    td.className = 'pageexpense_td6';
    if (expense.status == -1) {
      td.style.textDecoration = 'line-through';
    }
    td.appendChild(document.createTextNode(expense.payee));
    td = tr.insertCell(-1);
    td.className = 'pageexpense_td7';
    if (expense.status == -1) {
      td.style.textDecoration = 'line-through';
    }
    td.appendChild(document.createTextNode(expense.particular));
    td = tr.insertCell(-1);
    td.className = 'pageexpense_td8';
    if (expense.status == -1) {
      td.style.textDecoration = 'line-through';
    }
    td.appendChild(document.createTextNode('$' + expense.amount));
    td = tr.insertCell(-1);
    td.className = 'pageexpense_td9';
    if (expense.status == -1) {
      td.style.textDecoration = 'line-through';
    }
    td.appendChild(document.createTextNode(expense.method));
    td = tr.insertCell(-1);
    td.className = 'pageexpense_td10';
    if (expense.status == -1) {
      td.style.textDecoration = 'line-through';
    }
    td.appendChild(document.createTextNode(expense.chequeNumber));
    td = tr.insertCell(-1);
    td.className = 'pageexpense_td11';
    if (expense.status == -1) {
      td.style.textDecoration = 'line-through';
    }
    td.appendChild(document.createTextNode((expense.ng) ? 'Y' : 'N'));
    td = tr.insertCell(-1);
    td.className = 'pageexpense_td12';
    if (expense.status == -1) {
      td.style.textDecoration = 'line-through';
    }
    td.appendChild(document.createTextNode((expense.ne) ? 'Y' : 'N'));
    td = tr.insertCell(-1);
    td.className = 'pageexpense_td13';
    if (expense.status == -1) {
      td.style.color = '#ff0000';
      if (expense.cancelledMessage && expense.cancelledMessage.length > 0) {
        td.appendChild(document.createTextNode('delete: ' + ((expense.cancelledMessage.length > 15) ? expense.cancelledMessage.substring(0, 15) + '...' : expense.cancelledMessage)));
        var a = document.createElement('a');
        a.href = '#';
        a._expense = expense;
        a.appendChild(document.createTextNode('All'));
        a.onclick = function() { func1 = function() { _self._popupBox2._close(); };
                                 var pos = DOMUtils.findPos(this);
                                 var div = document.createElement('div');
                                 div.style.verticalAlign = 'top';
                                 div.style.width = '420px';
                                 div.style.color = '#ff0000';
                                 div.style.textAlign = 'left';
                                 div.style.padding = '4px 0 0 10px';
                                 div.style.wordWrap = 'break-word';
                                 div.appendChild(MiscUtils.span('\n' + this._expense.cancelledMessage));
                                 MiscUtils.dialog(_self._popupBox2, pos, div, func1, null, {t: 'Cancel Reason (' + this._expense.cancelledOperator + ', ' + SimpleDate.format(this._expense.cancelledDate) + ')', width: 460, height: 100});
                                 return false;
                               };
        td.appendChild(a);
      } else {
        td.appendChild(document.createTextNode('(none)'));
      }
    } else {
      if (expense.note && expense.note.length > 0) {
        td.appendChild(document.createTextNode((expense.note.length > 15) ? expense.note.substring(0, 15) + '...' : expense.note));
        var a = document.createElement('a');
        a.href = '#';
        a._expense = expense;
        a.appendChild(document.createTextNode('All'));
        a.onclick = function() { func1 = function() { _self._popupBox._close(); };
                                 var pos = DOMUtils.findPos(this);
                                 var div = document.createElement('div');
                                 div.appendChild(MiscUtils.span('\n' + this._expense.note));
                                 MiscUtils.dialog(_self._popupBox, pos, div, func1, null);
                                 return false;
                               };
        td.appendChild(a);
      } else {
        td.appendChild(document.createTextNode('(none)'));
      }
    }
    td = tr.insertCell(-1);
    td.className = 'pageexpense_td14';
    var remove = document.createElement('img');
    remove.src = 'images/common/delete.png';
    remove.style.cursor = 'pointer';
    remove._expense = expense;
    remove.onclick = function() { var pos = DOMUtils.findPos(this);
                                  var div = document.createElement('div');
                                  var expense = this._expense
                                  var func1 = function() { expense.status = -1;
                                                           expense.cancelledDate = _self._now;
                                                           expense.cancelledOperator = _self._operator.account;
                                                           expense.cancelledMessage = expense._text;
                                                           new RequestUtils()._write('expense', [expense], [], function() { _self._retrieveResults(1); _self._retrieveExpenses(1); }, { pos: pos });
                                                           _self._popupBox2._close();
                                                         };
                                  var func2 = function() { _self._popupBox2._close(); };
                                  MiscUtils.dialog(_self._popupBox2, pos, div, func1, func2, {t: 'Cancel Reason'});
                                  new DialogInput(div, expense, { title: '' });
                                  return false;
                                };
    if (expense.status != -1) {
      td.appendChild(remove);
    }
  }

  Pagination.makePagedResults(this._gui.pagination, this._parameters.page, this._parameters.total, this._parameters.size, function(page, condition) { _self._retrieveExpenses.call(_self, page, _self._parameters.order, _self._parameters.queue, _self._parameters.condition); }, this, document);
  this._expenseSearch(this._gui, function(order, queue, condition, from, to, size) { _self._retrieveExpenses.call(_self, 1, order, queue, condition, from, to, size); }, function(condition, from, to) { _self._retrieveResults.call(_self, 1, condition, from, to); });
};

HandlePageExpense.prototype._expenseSearch = function(gui, callbackFunc1, callbackFunc2) {
  var _self = this;
  this._callbackFunc1 = callbackFunc1;
  this._callbackFunc2 = callbackFunc2;
  
  gui.search.dateCreated.value = (this._search.dateFrom) ? SimpleDate.format(this._search.dateFrom) : '';
  gui.search.dateCreated.onclick = function() { var context = this;
                                                _self._changeDate.call(_self, this, _self._search.dateFrom, function(sd) { _self._search.dateFrom = sd; context.focus(); }, false);
                                                return false;
                                              };
  gui.search.dateCreated.onkeypress = function(e) { var code = DOMUtils.getEventCode(e);
                                                    if (code == 13) {
                                                      _self._callbackFunc1.call(_self, null, null, '1=1', (_self._search.dateFrom) ? JSON.stringify(_self._search.dateFrom) : null, (_self._search.dateTo) ? JSON.stringify(_self._search.dateTo) : null);
                                                      _self._callbackFunc2.call(_self, '1=1', (_self._search.dateFrom) ? JSON.stringify(_self._search.dateFrom) : null, (_self._search.dateTo) ? JSON.stringify(_self._search.dateTo) : null);
                                                    }
                                                  };
  gui.search.dateTo.value = (this._search.dateTo) ? SimpleDate.format(this._search.dateTo) : '';
  gui.search.dateTo.onclick = function() { var context = this;
                                           _self._changeDate.call(_self, this, _self._search.dateTo, function(sd) { _self._search.dateTo = sd; context.focus(); }, false);
                                           return false;
                                         };
  gui.search.dateTo.onkeypress = function(e) { var code = DOMUtils.getEventCode(e);
                                               if (code == 13) {
                                                 _self._callbackFunc1.call(_self, null, null, '1=1', (_self._search.dateFrom) ? JSON.stringify(_self._search.dateFrom) : null, (_self._search.dateTo) ? JSON.stringify(_self._search.dateTo) : null);
                                                 _self._callbackFunc2.call(_self, '1=1', (_self._search.dateFrom) ? JSON.stringify(_self._search.dateFrom) : null, (_self._search.dateTo) ? JSON.stringify(_self._search.dateTo) : null);
                                               }
                                             };
 gui.search.search.onclick = function() { _self._callbackFunc1.call(_self, null, null, '1=1', (_self._search.dateFrom) ? JSON.stringify(_self._search.dateFrom) : null, (_self._search.dateTo) ? JSON.stringify(_self._search.dateTo) : null);
                                          _self._callbackFunc2.call(_self, '1=1', (_self._search.dateFrom) ? JSON.stringify(_self._search.dateFrom) : null, (_self._search.dateTo) ? JSON.stringify(_self._search.dateTo) : null);
                                        };
};

HandlePageExpense.prototype._changeDate = function(label, currentDate, onChangeFunc, showTime) {
  var _self = this;
  this._wContainer = document.createElement('div');
  this._wContainer.style.left = DOMUtils.findPos(label)[0] + 'px';
  this._wContainer.style.top = DOMUtils.findPos(label)[1] + 'px';
  this._popupBox._open(this._wContainer, { pos: DOMUtils.findPos(label) });
  
  var ds = new DateSelect(currentDate, null, { container: this._wContainer, showTime: showTime });
  ds._selectFunc = function(sd) { _self._selectDate.call(_self, sd, label, onChangeFunc, showTime); };
};

HandlePageExpense.prototype._selectDate = function(sd, label, onChangeFunc, showTime) {
  
  onChangeFunc(sd);
  this._showDate(sd, label, showTime);
  this._popupBox._close();
};

HandlePageExpense.prototype._showDate = function(sd, label, showTime) {
  if (sd) { 
    label.value = SimpleDate.format(sd, showTime);
  } else {
    label.value = '';
  }
};